<template>
  <div class="container">
    <div class="totalData">
      <div class="title">短信发送数据</div>
      <el-row :gutter="24" class="totalBlock">
        <div class="item">
          <div class="border">
            <div class="item-num">{{ smStatisticsInfo ? smStatisticsInfo.total_num : '0' }}</div>
            <div class="item-brief">发送量</div>
            <div class="percent">{{ smStatisticsInfo ? smStatisticsInfo.look_lv : '0' }}%</div>
          </div>
        </div>
        <div class="item">
          <div class="border">
            <div class="item-num">{{ smStatisticsInfo ? smStatisticsInfo.look_num : '0' }}</div>
            <div class="item-brief">查看量</div>
            <div class="percent">{{ smStatisticsInfo ? smStatisticsInfo.submit_lv : '0' }}%</div>
          </div>
        </div>
        <div class="item">
          <div class="border">
            <div class="item-num">{{ smStatisticsInfo ? smStatisticsInfo.submit_num : '0' }}</div>
            <div class="item-brief">提交量</div>
            <div class="percent">{{ smStatisticsInfo ? smStatisticsInfo.follow_lv : '0' }}%</div>
          </div>
        </div>
        <div class="item">
          <div class="border">
            <div class="item-num">{{ smStatisticsInfo ? smStatisticsInfo.follow_num : '0' }}</div>
            <div class="item-brief">回访量</div>
            <div class="percent">{{ smStatisticsInfo ? smStatisticsInfo.publish_lv : '0' }}%</div>
          </div>
        </div>
        <div class="item last">
          <div class="border">
            <div class="item-num">{{ smStatisticsInfo ? smStatisticsInfo.publish_num : '0' }}</div>
            <div class="item-brief">有效量</div>
            <div class="item-desc">(资产、独享、加微信)</div>
          </div>
        </div>
      </el-row>
    </div>
    <div class="search">
      <searchui :searchFormArr="searchFormArr" @searchParma="searchParma" :isAccording="isAccording"></searchui>
    </div>
    <div class="detailTable">
      <tableTemplate :table="table" :isoperation="table.isoperation" :operationW="table.operationW" :operationList="table.operationList"></tableTemplate>
      <el-pagination
        small
        background
        :current-page="pageIndex"
        :page-size="pageSize"
        :page-sizes="[10, 20, 50, 100]"
        :total="totalPage"
        @current-change="currentChangeHandle"
        @size-change="sizeChangeHandle"
        layout="total, sizes, prev, pager, next, jumper"
        style="margin-top: 20px; text-align: right"
      ></el-pagination>
    </div>
  </div>
</template>

<script>
import { smsEnterTasksStatisticsApi, smsEnterTasksLisApi } from '@/api/message'

export default {
  name: 'smsStatistics',
  data() {
    return {
      title: '',
      smStatisticsInfo: {},
      pageIndex: 1,
      pageSize: 10,
      totalPage: 0,
      dataListLoading: false,
      searchFormArr: [
        {
          fieldName: '时间选择',
          type: 'timePicker',
          timeType: 'daterange',
          field: 'time',
          format: 'yyyy-MM-dd',
          placeholder: '请选择时间',
        },
      ],
      isAccording: true,
      searchParams: {
        start_time: '',
        end_time: '',
      },
      table: {
        // 数据数组
        Dataorigin: [],
        // 表头数组
        header: [
          { name: '序号', prop: 'index' },
          { name: '日期', prop: 'send_date' },
          { name: '发送量', prop: 'total_count' },
          { name: '查看量', prop: 'look_num' },
          { name: '查看率(%)', prop: 'look_lv' },
          { name: '提交量', prop: 'submit_num' },
          { name: '提交率(%)', prop: 'submit_lv' },
          { name: '回访量', prop: 'follow_num' },
          { name: '回访率(%)', prop: 'follow_lv' },
          { name: '有效量', prop: 'publish_num' },
          { name: '有效率(%)', prop: 'publish_lv' },
        ],
        isoperation: false,
        operationW: '200',
        operationList: {},
      },
    }
  },
  created() {
    this.title = this.$route.query.title
  },
  mounted() {
    // 处理权限
    this.getSmStatistics()
    this.smsEnterTasksList()
  },
  methods: {
    // 列表查询
    searchParma(e) {
      if (e.time) {
        this.searchParams.start_time = e.time[0]
        this.searchParams.end_time = e.time[1]
      } else {
        this.searchParams.start_time = ''
        this.searchParams.end_time = ''
      }
      this.pageIndex = 1
      this.getSmStatistics()
      this.smsEnterTasksList()
    },
    getSmStatistics() {
      const formData = new FormData()
      for (let key in this.searchParams) {
        formData.set(key, this.searchParams[key])
      }
      smsEnterTasksStatisticsApi(formData)
        .then((res) => {
          this.smStatisticsInfo = res.data
        })
        .catch((e) => {
          this.smStatisticsInfo = {}
        })
    },
    smsEnterTasksList() {
      const info = Object.assign({ pageNumber: this.pageIndex, pageSize: this.pageSize }, this.searchParams)
      const formData = new FormData()
      for (let key in info) {
        formData.set(key, info[key])
      }
      smsEnterTasksLisApi(formData)
        .then((res) => {
          this.table.Dataorigin = res.result.items
          this.table.Dataorigin.forEach((item, index) => {
            item.index = index + 1
          })
          this.totalPage = res.result.total
        })
        .catch((e) => {
          this.table.Dataorigin = []
        })
    },
    // 每页数
    sizeChangeHandle(val) {
      this.pageSize = val
      this.pageIndex = 1
      this.smsEnterTasksList()
    },
    // 当前页
    currentChangeHandle(val) {
      this.pageIndex = val
      this.smsEnterTasksList()
    },
  },
}
</script>

<style scoped lang="scss">
.container {
  padding: 16px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  .totalData {
    width: 100%;
    background: #fff;
    padding: 12px 16px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    .title {
      font-size: 14px;
      margin-bottom: 10px;
    }
    .totalBlock {
      margin: 30px 0;
      display: flex;
      .item {
        width: 20%;
        flex-direction: column;
        display: flex;
        align-items: center;
        position: relative;
        .border {
          width: 54%;
          height: 77px;
          border: 1px solid #f4f4f4;
          background: #f9f9f9;
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          padding: 10px 0;
        }
        &:before {
          content: '';
          position: absolute;
          width: 30%;
          height: 1px;
          border-bottom: 1px dashed #409eff;
          right: -14%;
          top: 38px;
        }
        &:after {
          content: '';
          position: absolute;
          width: 10px;
          height: 10px;
          border: 5px solid transparent;
          border-left-color: #409eff;
          right: -18%;
          top: 33.5px;
        }
        &.last {
          &:before {
            display: none;
          }
          &:after {
            display: none;
          }
        }
        .percent {
          position: absolute;
          right: -6%;
          top: 26px;
          background: #ffffff;
          padding: 6px;
        }
        .item-num {
          font-size: 16px;
          font-weight: 700;
          color: #262626;
          margin-top: -2px;
        }
        .item-brief {
          text-align: center;
          margin-top: 4px;
          color: #8c8c8c;
          font-size: 14px;
        }
        .item-desc {
          color: #8c8c8c;
          font-size: 12px;
          margin-top: 4px;
        }
      }
    }
  }
  .search {
    padding: 0 32px 24px;
  }
  .detailTable {
    padding: 0 32px;
  }
}
</style>
